<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="纪德朝">
    <title>图片轮换</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .container {
            width: 220px;
            height: 280px;
            margin: 50px auto;
            border: 2px solid black;
            border-radius: 10px;
        }

        div {
            margin: 0;
            padding: 0;
        }

        .active {
            z-index: 100;
        }

        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .max {
            width: 154px;
            height: 154px;
            float: left;
            /* position: relative; */
            /* border: 1px solid black; */
        }

        .max img {
            /* position: absolute;
            top: 5px;
            left: 5px;
            border-radius: 10px; */
        }

        .first {
            display: inline-block;
            margin-left: 5px;
        }

        .small img {
            float: left;
            margin: 1px 0px 1px 3px;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <section class="container">
        <div class="tupian">
            <div class="max">
                <img class="active" src="img/big_1.jpg" alt="">
                <!-- <img src="img/big_2.jpg" alt="">
                <img src="img/big_3.jpg" alt="">
                <img src="img/big_4.jpg" alt="">
                <img src="img/big_5.jpg" alt="">
                <img src="img/big_6.jpg" alt="">
                <img src="img/big_7.jpg" alt="">
                <img src="img/big_8.jpg" alt="">
                <img src="img/big_9.jpg" alt="">
                <img src="img/big_10.jpg" alt="">
                <img src="img/big_11.jpg" alt="">  -->
            </div>
            <div class="small">
                <li class="first"><img src="img/small_1.jpg" alt=""></li>
                <li class="first"><img src="img/small_2.jpg" alt=""></li>
                <li class="first"><img src="img/small_3.jpg" alt=""></li>
                <li><img src="img/small_4.jpg" alt=""></li>
                <li><img src="img/small_5.jpg" alt=""></li>
                <li><img src="img/small_6.jpg" alt=""></li>
                <li><img src="img/small_7.jpg" alt=""></li>
                <li><img src="img/small_8.jpg" alt=""></li>
                <li><img src="img/small_9.jpg" alt=""></li>
                <li><img src="img/small_10.jpg" alt=""></li>
                <li><img src="img/small_11.jpg" alt=""></li>
            </div>
        </div>
        <!-- <div class="clear"></div> -->
    </section>
</body>
<script>
    var small = document.querySelector('.small').querySelectorAll('li img');
    var max = document.querySelector('.max').querySelector('img');
    // var index = 0;
    for (var i = 0; i < small.length; i++) {
        small[i].index = i;
        small[i].onmouseover = function () {
            max.src = small[this.index].src;
        }
    }

</script>

</html>